<template>
	<view class="my_app">
		<view class="my_container">
			<view class="box_1">
				<view>
					<view class="top u-skeleton">
						<image :src="mySetmeal.logo_src" alt="logo" class="logo" />
						<view class="name substring">{{ mySetmeal.companyname }}</view>
						<view class="type">
							我的套餐：<text>{{ mySetmeal.name }}</text>
						</view>
						<view class="date" v-if="mySetmeal.deadline == 0">
							有效期至：<text>无限期</text>
						</view>
						<view class="date" v-else>
							有效期至：<text>{{ mySetmeal.deadline | timeFilter }}</text>
						</view>
					</view>
					<u-skeleton avatar title :row="3" :loading="top_loading"></u-skeleton>
				</view>
				<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
				<view class="bottom" @click="handleClick('/commonViews/service/OrderList')">
					服务订单
					<view class="tip_text">查看全部订单</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="bottom" @click="handleTips">
					服务订单
					<view class="tip_text">查看全部订单</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="box_title">
				我的资源
				<view class="tip_text" @click="handleClick('/company/Service/MySetmealLog')">
					使用明细
				</view>
			</view>
			<view class="box_2">
				<view class="item">
					<view class="ico"></view>
					<view class="text">
						职位并发 <text>{{ mySetmeal.jobs_meanwhile }}</text>
					</view>
					<view class="link" @click="handlerJobadd">发职位</view>
				</view>
				<view class="item right">
					<view class="ico"></view>
					<view class="text">
						简历点 <text>{{ mySetmeal.download_resume_point }}</text>
					</view>
					<view class="link" @click="handleClick('/views/ResumeList')">搜简历</view>
				</view>
				<view class="clear"></view>
			</view>
			<view class="box_title">
				我的特权
				<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
				<view class="tip_text orange" @click="handleTip">
					升级会员畅享更多特权
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="tip_text orange" @click="handleTips">
					升级会员畅享更多特权
				</view>
				<!-- #endif -->
			</view>
			<view class="box_3">
				<view class="item i1">
					免费刷新职位次数
					<view class="tip_text">
						{{ mySetmeal.refresh_jobs_free_perday }}次/天
					</view>
				</view>
				<view class="item i2">
					下载简历数上限
					<view class="tip_text">
						{{ mySetmeal.download_resume_max_perday }}份/天
					</view>
				</view>
				<view class="item i3">
					增值服务专享折扣
					<view class="tip_text orange" v-if="mySetmeal.service_added_discount > 0">
						{{ mySetmeal.service_added_discount }} 折
					</view>
					<view class="tip_text gray" v-else>
						无折扣
					</view>
				</view>
				<view class="item i4">
					收到的简历免费查看
					<view class="tip_text" :class="mySetmeal.show_apply_contact == 1 ? 'orange' : 'gray'">
						{{ mySetmeal.show_apply_contact == 1 ? "支持" : "暂不支持" }}
					</view>
				</view>
				<view class="item i5">
					微海报
					<view class="tip_text" :class="mySetmeal.enable_poster == 1 ? 'orange' : 'gray'">
						{{ mySetmeal.enable_poster == 1 ? "支持" : "暂不支持" }}
					</view>
				</view>
				<view class="item i6">
					视频面试
					<view class="tip_text" :class="mySetmeal.enable_video_interview == 1 ? 'orange' : 'gray'">
						{{ mySetmeal.enable_video_interview == 1 ? "支持" : "暂不支持" }}
					</view>
				</view>
				<view class="item i7">
					会员专属标识
					<view class="tip_text">会员标识</view>
				</view>
				<view class="item i8">
					专属金牌客服
					<view class="tip_text">客服快速响应</view>
				</view>
			</view>
			<view class="box_4">
				<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
				<view class="up_btn" @click="handleTip">
					升级套餐
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="up_btn" @click="handleTips">
					升级套餐
				</view>
				<!-- #endif -->
			</view>
		</view>
		<u-modal v-model="upgradeShow" :content="upgradeText" :show-cancel-button="true" confirm-text="升级套餐"
			@confirm="handleTip"></u-modal>
		<u-toast ref="uToast" />
		<CustomerModal ref="CustomerModal"></CustomerModal>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import CustomerModal from '@/components/CustomerModal.vue'
	export default {
		name: 'MySetmeal',
		components: {
			CustomerModal
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d}')
			}
		},
		data() {
			return {
				type: '',
				top_loading: true,
				mySetmeal: {},
				upgradeShow: false,
				upgradeText: ''
			}
		},
		created() {
			this.fetchSetmeal()
		},
		methods: {
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			handleTips() {
				this.$nextTick(() => {
					this.$refs.CustomerModal.getCustomer()
				})
			},
			handleTip() {
				// #ifdef MP-TOUTIAO
				this.$nextTick(() => {
					this.$refs.CustomerModal.getCustomer()
				})
				// #endif

				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/service/company/updataSetMeal'
				})
				// #endif
			},
			handlerJobadd() {
				http
					.get(api.company_check_jobadd_num, {})
					.then(res => {
						if (res.data.data.enable_addjob_num <= 0) {
							this.upgradeText = '您当前是' + res.data.data.setmeal_name +
								'，当前可发布职位数为0，建议您立即升级套餐或将暂时不招聘的职位设为关闭！'
							this.upgradeShow = true
							return false
						} else {
							uni.navigateTo({
								url: '/company/AddJob'
							})
						}
					})
					.catch(() => {})
			},
			fetchSetmeal() {
				http
					.get(api.member_setmeal, {})
					.then(res => {
						this.companyInfo = res.data.data.company_info
						this.mySetmeal = res.data.data.info
						this.mySetmeal.logo_src = res.data.data.company_info.logo_src
						this.mySetmeal.companyname = res.data.data.company_info.companyname
						this.top_loading = false
					})
					.catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_container {
		.box_4 {
			.up_btn {
				width: 610rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 34rpx;
				font-weight: bold;
				color: #ffffff;
				padding: 18rpx 0;
				background: linear-gradient(to right, #cca467 0%, #eecf8e 100%);
				border-radius: 84rpx;
			}

			padding: 70rpx 0;
		}

		.box_3 {
			.item {
				&.i8 {
					background-image: url($ImgUrl + "my_setitem_ic8.png");
					background-position: 7rpx center;
					background-repeat: no-repeat;
					background-size: 31rpx 26rpx;
				}

				&.i7 {
					background-image: url($ImgUrl + "my_setitem_ic7.png");
					background-position: 9rpx center;
					background-repeat: no-repeat;
					background-size: 26rpx 26rpx;
				}

				&.i6 {
					background-image: url($ImgUrl + "my_setitem_ic6.png");
					background-position: 9rpx center;
					background-repeat: no-repeat;
					background-size: 26rpx 26rpx;
				}

				&.i5 {
					background-image: url($ImgUrl + "my_setitem_ic5.png");
					background-position: 11rpx center;
					background-repeat: no-repeat;
					background-size: 23rpx 23rpx;
				}

				&.i4 {
					background-image: url($ImgUrl + "my_setitem_ic4.png");
					background-position: 13rpx center;
					background-repeat: no-repeat;
					background-size: 20rpx 26rpx;
				}

				&.i3 {
					background-image: url($ImgUrl + "my_setitem_ic3.png");
					background-position: 9rpx center;
					background-repeat: no-repeat;
					background-size: 27rpx 23rpx;
				}

				&.i2 {
					background-image: url($ImgUrl + "my_setitem_ic2.png");
					background-position: 10rpx center;
					background-repeat: no-repeat;
					background-size: 28rpx 24rpx;
				}

				&.i1 {
					background-image: url($ImgUrl + "my_setitem_ic1.png");
					background-position: 5rpx center;
					background-repeat: no-repeat;
					background-size: 30rpx 26rpx;
				}

				.tip_text {
					position: absolute;
					right: 4rpx;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 28rpx;
					color: #333333;

					&.orange {
						color: #ff6600;
					}

					&.gray {
						color: #999999;
					}
				}

				position: relative;
				padding: 32rpx 0 32rpx 46rpx;
				font-size: 28rpx;
				color: #333333;
				border-bottom: 2rpx solid #f3f3f3;
			}

			width: 100%;
			border-top: 2rpx solid #f3f3f3;
		}

		.box_2 {
			.item {
				.link {
					display: block;
					text-decoration: none;
					width: 140rpx;
					margin: 0 auto;
					font-size: 24rpx;
					color: #ffffff;
					padding: 12rpx 0;
					background: linear-gradient(to right, #4fa5fa 0%, #2590fa 100%);
					border-radius: 48rpx;
				}

				.text {
					padding: 20rpx 0 30rpx;
					font-size: 28rpx;
					color: #333333;

					text {
						color: #fa685c;
					}
				}

				.ico {
					width: 60rpx;
					height: 60rpx;
					margin: 0 auto;
					background-image: url($ImgUrl + "my_setmeal_ic2.png");
					background-position: 0 0;
					background-repeat: no-repeat;
					background-size: 60rpx 60rpx;
				}

				float: left;
				text-align: center;
				width: 320rpx;
				height: 310rpx;
				border-radius: 12rpx;
				box-shadow: 0 0 10rpx #c2c2c2;
				padding-top: 56rpx;

				&.right {
					.ico {
						width: 70rpx;
						height: 60rpx;
						margin: 0 auto;
						background-image: url($ImgUrl + "my_setmeal_ic3.png");
						background-position: 0 0;
						background-repeat: no-repeat;
						background-size: 70rpx 60rpx;
					}

					float: right;
				}
			}

			width: 100%;
			margin-bottom: 20rpx;
		}

		.box_1 {
			.bottom {
				&::after {
					content: "";
					position: absolute;
					right: 22rpx;
					top: 42rpx;
					width: 14rpx;
					height: 14rpx;
					border-top: 2rpx solid #666666;
					border-right: 2rpx solid #666666;
					transform: rotate(45deg);
				}

				.tip_text {
					position: absolute;
					right: 42rpx;
					top: 50%;
					transform: translate(0, -50%);
					color: #c9c9c9;
				}

				position: relative;
				padding: 30rpx 0 30rpx 58rpx;
				border-top: 2rpx solid #f3f3f3;
				font-size: 28rpx;
				color: #333333;
				background-image: url($ImgUrl + "my_setmeal_ic1.png");
				background-position:26rpx center;
				background-repeat:no-repeat;
				background-size: 22rpx 26rpx;
			}

			.top {
				.date {
					font-size: 24rpx;
					color: #999999;
					padding-bottom: 40rpx;

					text {
						color: #333;
					}
				}

				.type {
					color: #999999;
					font-size: 24rpx;
					margin-bottom: 16rpx;

					text {
						color: #fa7445;
					}
				}

				.name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;
					padding: 42rpx 30rpx 0 0;
					margin-bottom: 20rpx;
				}

				.logo {
					position: absolute;
					top: 74rpx;
					left: 40rpx;
					width: 110rpx;
					height: 110rpx;
					border: 0;
					border-radius: 10rpx;
				}

				position: relative;
				padding-left: 186rpx;
			}

			background-color: #ffffff;
			border-radius: 14rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx #c2c2c2;
			margin-bottom: 20rpx;
		}

		.box_title {
			.tip_text {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0, -50%);
				font-size: 28rpx;
				color: #999999;

				&.orange {
					color: #ff6600;
				}
			}

			&::after {
				content: "";
				position: absolute;
				right: 10rpx;
				top: 40rpx;
				width: 14rpx;
				height: 14rpx;
				border-top: 2rpx solid #666666;
				border-right: 2rpx solid #666666;
				transform: rotate(45deg);
			}

			position: relative;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			padding: 24rpx 0;
		}

		* {
			line-height: normal
		}

		width:680rpx;
		margin:0 auto;
		padding-top: 50rpx;
	}

	.my_app {
		background-image: url($ImgUrl + "com_setmeal_top_bg.png");
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 750rpx 352rpx;
	}
</style>